import React, { useEffect, useState } from 'react';
import { Grid, Field, Form, Input, Button } from '@alifd/next';
import { useLocation, useRequest } from 'ice';
import { FormattedMessage } from 'react-intl';
import { pathObj } from '@/pages/OperationCenter/AddressManage';

const { Row, Col } = Grid;

interface Props {
  detail: AddressState.AddressItem;
  onRefresh: () => void;
  onEmpty: () => void;
}

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const FormItem = Form.Item;

const AddrForm: React.FC<Props> = (props) => {
  const location = useLocation();
  const field = Field.useField([]);
  const { detail, onRefresh = () => { }, onEmpty } = props;
  const [isPreview, setIsPreview] = useState(true);

  const { request, loading } = useRequest(pathObj[location.pathname].saveService, {
    manual: true,
    onSuccess: () => {
      onRefresh();
      setIsPreview(true);
    },
  });

  useEffect(() => {
    if (detail) {
      field.setValues(detail);
      setIsPreview(!!detail.id);
    }
  }, [detail]);

  const handleOk = (values, errs) => {
    if (errs) {
      return;
    }
    request(values);
  };

  const handleReset = () => {
    if (detail.id) {
      field.setValues(detail);
      setIsPreview(true);
    } else {
      onEmpty();
    }
  };

  return (
    <Form
      fullWidth
      labelAlign="left"
      field={field}
      useLabelForErrorMessage
      isPreview={isPreview}
      {...formItemLayout}
    >
      <FormItem
        label="名字:"
        name="lastName"
        required
      >
        <Input placeholder="请输入" />
      </FormItem>
      <FormItem
        label="姓氏:"
        name="firstName"
        required
      >
        <Input placeholder="请输入" />
      </FormItem>
      <FormItem
        label="联系电话:"
        required
        name="telephone"
        format="tel"
      >
        <Input placeholder="请输入" />
      </FormItem>
      <FormItem label="所在地区:" required style={{ marginBottom: 0 }}>
        <Row gutter="4">
          <Col>
            <FormItem name="region" required requiredTrigger="onBlur" requiredMessage="必填">
              <Input placeholder="州" />
            </FormItem>
          </Col>
          <Col span="1">
            <FormItem>
              <span>/</span>
            </FormItem>
          </Col>
          <Col>
            <FormItem name="locality" required requiredTrigger="onBlur" requiredMessage="必填">
              <Input placeholder="省" />
            </FormItem>
          </Col>
          <Col span="1">
            <FormItem>
              <span>/</span>
            </FormItem>
          </Col>
          <Col>
            <FormItem name="streetAddress" required requiredTrigger="onBlur" requiredMessage="必填">
              <Input placeholder="街道" />
            </FormItem>
          </Col>
        </Row>
      </FormItem>
      <FormItem
        label="详细地址:"
        name="extendAddress"
        required
      >
        <Input.TextArea placeholder="请输入" />
      </FormItem>
      <FormItem
        label="邮编:"
        name="postCode"
        required
      >
        <Input placeholder="请输入" />
      </FormItem>
      {isPreview ? (
        <FormItem label=" ">
          <Button type="primary" onClick={() => setIsPreview(false)}>
            <FormattedMessage id="btn.edit" />
          </Button>
        </FormItem>
      ) : (
        <FormItem label=" ">
          <Form.Submit type="primary" onClick={handleOk} validate style={{ marginRight: 20 }} loading={loading}>
            <FormattedMessage id="btn.save" />
          </Form.Submit>
          <Button onClick={handleReset}>
            <FormattedMessage id="btn.cancel" />
          </Button>
        </FormItem>
      )}
    </Form>
  );
};

export default AddrForm;
